<%-- 
    Document   : BK
    Created on : 2017-9-29, 16:27:45
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--定时刷新界面，20秒-->
        <!--<meta http-equiv="refresh" content="20">-->
        <title>BK监控</title>
        <link rel="stylesheet" type="text/css" href="extjs/build/classic/theme-crisp/resources/theme-crisp-all.css">
        <link rel="stylesheet" type="text/css" href="extjs/build/classic/theme-crisp/resources/theme-crisp-all-debug.css">

        <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-bootstrap.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-all.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-all-debug.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/classic/locale/locale-zh_CN.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/classic/locale/locale-zh_CN-debug.js"></script>
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.tip.QuickTipManager.init(); //初始化提示
//                Ext.MessageBox.alert("提示","这是TRS");
                Ext.EventManager.onWindowResize(function (width, height) {
                    viewport.setHeight(height);
                    viewport.setWidth(width);
                });
                var rt_id = "bk",
                        rt_url = "baidu_all_data.htm",
                        rt_src = "bk/4/";

                var daily_id = "bk_daily",
                        daily_cal_id = "bk_dlcalendar",
                        daily_url = "baidu_all_data.htm",
                        daily_src = "bk/";

                var weekly_id = "bk_weekly",
                        weekly_cal_id = "bk_wlcalendar",
                        weekly_url = "baidu_all_data.htm",
                        weekly_src = "bk/";

                var tab = Ext.create("Ext.tab.Panel", {
                    id: 'tab_bk',
                    tabPosition: "top", // 标签条的位置 top left right bottom
                    defaults: {
                        iconAlign: "top", // icon对其方式 top left right bottom
                        textAlign: "center", // 文本对其样式 left right center
                        bodyPadding: 15,
                        scrollable: true, // 允许滚动
                        closable: false  // 允许关闭
                    },
                    layout: 'border',
                    border: false,
                    width: Ext.getBody().getViewSize().width,
                    height: Ext.getBody().getViewSize().heigt,
                    tabBar: {
                        layout: {
                            pack: "center"
                        }
                    },
                    activeTab: 0,
                    items: [
//                        {
//                            id: rt_id,
//                            title: "实时统计",
//                            closable: false,
//                            width: Ext.getBody().getViewSize().width,
////                            height: "100",
//                            autoScroll: true, //滚动条 
//                            items: [
//                            ],
//                            listeners: {
//                                //render是加载的时候触发一次，beforeshow是标签切换会触发
//                                "activate": function () {
//                                    Ext.Ajax.request({
//                                        url: rt_url,
//                                        params: {selectDate: "0", head: "bk.head", tail: "forum.tianya.rt.tail", webpath: "webapp.forum.kaidi.path"},
//                                        headers: {
//                                            'userHeader': 'userMsg'
//                                        },
//                                        method: 'POST',
//                                        success: function (response, options) {
//                                            if (response.responseText !== "")
//                                            {
//                                                var stwbSrc = response.responseText;
//                                                var stwbSrcArray = stwbSrc.split(";");
//                                                var swbHtml = "<div>";
////                                                Ext.MessageBox.alert('加载成功1', '图片路径: ' + stwbSrcArray.length);
//                                                for (var i = 0; i < stwbSrcArray.length - 1; i++) {
//                                                    swbHtml += "<img vertical-align:middle src=\"" + rt_src + stwbSrcArray[i] + "\"/>";
////                                                    Ext.MessageBox.alert('加载成功', '图片路径: ' + stwbSrcArray[i]);
//                                                }
//                                                swbHtml += "</div>"
//                                                Ext.getCmp(rt_id).setHtml(swbHtml);
//                                            } else {
//                                                Ext.MessageBox.alert('加载失败', response.responseText);
//                                            }
//                                        },
//                                        failure: function (response, options) {
//                                            Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
//                                        }
//                                    });
//                                    //添加ext的异步请求，拼接日期和分类，按照请求信息寻找路径，并将返回结果拼接成html格式，添加到items中
//                                    //多个items的布局
//                                }
//                            }
//                        },
                        {
                            xtype: "panel",
                            title: "每日统计",
                            id: daily_id,
                            closable: false,
                            width: Ext.getBody().getViewSize().width,
//                            height: "100",
//                            glyph: "xf007@FontAwesome",
//                            html: "每日统计",
                            items: [
                                {
                                    xtype: 'datefield',
                                    emptyText: "选择日期",
                                    format: 'Ymd',
                                    id: daily_cal_id,
                                    listeners: {
                                        "select": function () {
                                            var formateDate = Ext.util.Format.date(Ext.getCmp(daily_cal_id).getValue(), 'Ymd');
                                            //先清空原有的html
                                            Ext.getCmp(daily_id).setHtml("");
                                            Ext.Ajax.request({
                                                url: daily_url,
                                                params: {selectDate: formateDate, head: "bk.head", tail: "forum.tianya.daily.tail", webpath: "webapp.bk.path"},
                                                headers: {
                                                    'userHeader': 'userMsg'
                                                },
                                                method: 'POST',
                                                success: function (response, options) {
                                                    if (response.responseText !== "")
                                                    {
                                                        var stwbSrc = response.responseText;
                                                        var stwbSrcArray = stwbSrc.split(";");
                                                        var swbHtml = "<div>";
//                                                Ext.MessageBox.alert('加载成功1', '图片路径: ' + stwbSrcArray.length);
                                                        for (var i = 0; i < stwbSrcArray.length - 1; i++) {
                                                            swbHtml += "<img style='width: 500px;height: 300px' vertical-align:middle src=\"" + daily_src + formateDate + "/24/" + stwbSrcArray[i] + "\"/>";
//                                                            Ext.MessageBox.alert('加载成功', '图片路径: ' + stwbSrcArray[i]);
                                                        }
                                                        swbHtml += "</div>"
                                                        Ext.getCmp(daily_id).setHtml(swbHtml);
                                                    } else {
                                                        Ext.MessageBox.alert('加载失败', "没有该日数据或者加载数据失败");
                                                    }
                                                },
                                                failure: function (response, options) {
                                                    Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                                                }
                                            });

                                            //添加ext的异步请求，拼接日期和分类，按照请求信息寻找路径，并将返回结果拼接成html格式，添加到items中
                                            //多个items的布局
                                        }
                                    }
                                },
                            ],
                            listeners: {
                                //render是加载的时候触发一次，beforeshow是标签切换会触发
                                "activate": function () {
                                    var today = new Date();
                                    var todayDate = Ext.util.Format.date(today, "Ymd");
                                    Ext.getCmp(daily_cal_id).setValue(todayDate);
                                    Ext.Ajax.request({
                                        url: daily_url,
                                        params: {selectDate: todayDate, head: "bk.head", tail: "forum.tianya.daily.tail", webpath: "webapp.bk.path"},
                                        headers: {
                                            'userHeader': 'userMsg'
                                        },
                                        method: 'POST',
                                        success: function (response, options) {
                                            if (response.responseText !== "")
                                            {
                                                var stwbSrc = response.responseText;
                                                var stwbSrcArray = stwbSrc.split(";");
                                                var swbHtml = "<div>";
//                                                Ext.MessageBox.alert('加载成功1', '图片路径: ' + stwbSrcArray.length);
                                                for (var i = 0; i < stwbSrcArray.length - 1; i++) {
                                                    swbHtml += "<img style='width: 500px;height: 300px' vertical-align:middle src=\"" + daily_src + todayDate + "/24/" + stwbSrcArray[i] + "\"/>";
//                                                            Ext.MessageBox.alert('加载成功', '图片路径: ' + stwbSrcArray[i]);
                                                }
                                                swbHtml += "</div>"
                                                Ext.getCmp(daily_id).setHtml(swbHtml);
                                            } else {
                                                Ext.MessageBox.alert('加载失败', "没有该日数据或者加载数据失败");
                                            }
                                        },
                                        failure: function (response, options) {
                                            Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                                        }
                                    });
                                    //添加ext的异步请求，拼接日期和分类，按照请求信息寻找路径，并将返回结果拼接成html格式，添加到items中
                                    //多个items的布局
                                }
                            }
                        },
                        {
                            xtype: "panel",
                            title: "每周统计",
                            id: weekly_id,
                            closable: false,
                            width: Ext.getBody().getViewSize().width,
//                            height: "100",
//                            glyph: "xf007@FontAwesome",
//                            html: "每日统计",
                            items: [
                                {
                                    xtype: 'datefield',
                                    emptyText: "选择日期",
                                    format: 'Ymd',
                                    id: weekly_cal_id,
                                    listeners: {
                                        "select": function () {
                                            var formateDate = Ext.util.Format.date(Ext.getCmp(weekly_cal_id).getValue(), 'Ymd');
                                            //先清空原有的html
                                            Ext.getCmp(weekly_id).setHtml("");
                                            Ext.Ajax.request({
                                                url: weekly_url,
                                                params: {selectDate: formateDate, head: "bk.head", tail: "forum.tianya.weekly.tail", webpath: "webapp.bk.path"},
                                                headers: {
                                                    'userHeader': 'userMsg'
                                                },
                                                method: 'POST',
                                                success: function (response, options) {
                                                    if (response.responseText !== "")
                                                    {
                                                        var stwbSrc = response.responseText;
                                                        var stwbSrcArray = stwbSrc.split(";");
                                                        var swbHtml = "<div>";
//                                                        Ext.MessageBox.alert('加载成功1', '图片路径: ' + stwbSrc);
                                                        for (var i = 0; i < stwbSrcArray.length - 1; i++) {
                                                            swbHtml += "<img style='width: 500px;height: 300px' vertical-align:middle src=\"" + weekly_src + formateDate + "/168/" + stwbSrcArray[i] + "\"/>";
//                                                            Ext.MessageBox.alert('加载成功', '图片路径: ' + stwbSrcArray[i]);
                                                        }
                                                        swbHtml += "</div>"
                                                        Ext.getCmp(weekly_id).setHtml(swbHtml);
                                                    } else {
                                                        Ext.MessageBox.alert('加载失败', "没有该日数据或者加载数据失败");
                                                    }
                                                },
                                                failure: function (response, options) {
                                                    Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                                                }
                                            });

                                            //添加ext的异步请求，拼接日期和分类，按照请求信息寻找路径，并将返回结果拼接成html格式，添加到items中
                                            //多个items的布局
                                        }
                                    }
                                },
                            ],
                            listeners: {
                                //render是加载的时候触发一次，beforeshow是标签切换会触发
                                "activate": function () {
                                    var today = new Date();
                                    var todayDate = Ext.util.Format.date(today, "Ymd");
                                    Ext.getCmp(weekly_cal_id).setValue(todayDate);
                                    Ext.Ajax.request({
                                        url: weekly_url,
                                        params: {selectDate: todayDate, head: "bk.head", tail: "forum.tianya.weekly.tail", webpath: "webapp.bk.path"},
                                        headers: {
                                            'userHeader': 'userMsg'
                                        },
                                        method: 'POST',
                                        success: function (response, options) {
                                            if (response.responseText !== "")
                                            {
                                                var stwbSrc = response.responseText;
                                                var stwbSrcArray = stwbSrc.split(";");
                                                var swbHtml = "<div>";
//                                                        Ext.MessageBox.alert('加载成功1', '图片路径: ' + stwbSrc);
                                                for (var i = 0; i < stwbSrcArray.length - 1; i++) {
                                                    swbHtml += "<img style='width: 500px;height: 300px' vertical-align:middle src=\"" + weekly_src + todayDate + "/168/" + stwbSrcArray[i] + "\"/>";
//                                                            Ext.MessageBox.alert('加载成功', '图片路径: ' + stwbSrcArray[i]);
                                                }
                                                swbHtml += "</div>"
                                                Ext.getCmp(weekly_id).setHtml(swbHtml);
                                            } else {
                                                Ext.MessageBox.alert('加载失败', "没有该日数据或者加载数据失败");
                                            }
                                        },
                                        failure: function (response, options) {
                                            Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                                        }
                                    });
                                    //添加ext的异步请求，拼接日期和分类，按照请求信息寻找路径，并将返回结果拼接成html格式，添加到items中
                                    //多个items的布局
                                }
                            }
                        },
                      
                    ]
                });
                var viewport = Ext.create('Ext.container.Viewport', {
                    layout: 'border',
                    width: Ext.getBody().getViewSize().width,
                    height: Ext.getBody().getViewSize().height,
                    items: [
                        {
                            region: "north",
                            xtype: "panel",
//                            title: "微博加载监测",
                            titleAlign: "center",
                        },
                        {
                            region: 'center',
                            xtype: 'panel', // TabPanel itself has no title
                            activeTab: 0, // First tab active by default
                            layout: "fit", //layout必须匹配，不然区域会很难设置
                            items: [
                                tab
                            ]
                        }]
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>
